<template>
  <table-form-dialog v-model="visible"
                     @close="close"
                     width="400px"
                     @container="container"
                     :title="title">
    <div class="dialog-box">
      <el-form :model="form"
               ref="ruleForm"
               class="demo-ruleForm">
        <el-form-item label=""
                      :prop="label"
                      :rules="[
            { required: true, message: `信息不能为空`, trigger: 'change' }
          ]">
          <el-input v-model="form[label]"
                    type="textarea"
                    maxlength="200"
                    show-word-limit
                    @input="handleInput" />
        </el-form-item>
      </el-form>
    </div>
  </table-form-dialog>
</template>

<script>
import TableFormDialog from "@components/dialog/Dialog";
import _ from 'lodash'
export default {
  name: "Reject",
  props: {
    id: {
      type: [Number, String],
      default: null
    },
    label: {
      type: String
    },
    title: {
      type: String,
      default: "拒绝原因"
    },
    idName: {
      type: String
    },
    api: {
      type: Function,
      default: () => { }
    },
    isClose: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: { TableFormDialog },
  computed: {
    postData () {
      return {
        ...this.form
      };
    }
  },
  data () {
    return {
      form: {}
    };
  },
  beforeDestroy () {
    clearInterval(this.timer);
  },
  methods: {
    handleInput (val) {
      this.form[this.label] = val.trim();
    },
    changFormData (value) {
      this.ruleForm = value;
    },
    close () {
      this.$emit("update:visible", false)
    },
    container: _.debounce(function () {    // 触发事件
      this.$refs.ruleForm.validate((val) => {
        this.postData[this.idName] = this.id;
        console.log(this.postData);
        if (val) {
          this.action();
        }
      });
    }, 600),
    async action () {
      let { code, message } = await this.api(this.postData);
      this.$emit("update:visible", false)
      this.$message[code === 0 ? "success" : "error"](message);
      if (code === 0) {
        this.$emit("back");
      }
    }
  }
};
</script>

<style></style>
